<template>
  <div class="fixed-table-actionbar">
    <div class="search-bar">
      <el-form :model="formItem" :inline="true" class="form-filter" size="mini">
        <el-form-item>
          <TreeSelect
            v-model="formItem.s_parentCode"
            :multiple="false"
            :options="typeOptions"
            placeholder="选择资产分类"
            :disable-branch-nodes="true"
            @input="onTypeCodeInput"
          />
        </el-form-item>
        <el-form-item>
          <TreeSelect
            v-model="formItem.s_spareTypeCode"
            :multiple="false"
            :options="spareTypeOptions"
            placeholder="选择备品备件分类"
            :disable-branch-nodes="true"
            @input="onSpareTypeCodeInput"
          />
        </el-form-item>
        <el-form-item>
          <el-input
            v-model="formItem.s_globalSearch"
            placeholder="请输入货品名称"
            clearable
            @keyup.enter.native="globalSearch"
            @change="onGlobeSearchInputChange"
          />
        </el-form-item>
        <el-form-item>
          <el-button plain icon="el-icon-search" @click="globalSearch" />
        </el-form-item>
      </el-form>
    </div>
    <div class="action-bar">
      <el-button plain size="mini" icon="el-icon-download" @click="sqexportExcel">导出</el-button>
    </div>
  </div>
</template>

<script>
import { clone } from '@neu/biz-core/utils/utils'
import { tree } from '@neu/auth-ui/api/organization'
import { sqexportExcel } from '@neu/dcam-ui/api/stock'
import {
  tree as assetTypeTree
} from '@neu/dcam-ui/api/assetType'
import {
  tree as spareTypeTree
} from '@neu/dcam-ui/api/spareType'
import TreeSelect from '@neu/biz-core/components/TreeSelect'

/** 全局检索key */
const formItem = {
  s_globalSearch: '',
  s_parentCode: null,
  s_spareTypeCode: null
}

export default {
  name: 'StockQueryActionBar',
  components: {
    TreeSelect
  },
  data() {
    return {
      formItem: clone(formItem),
      /** 资产类型树 */
      typeOptions: [],
      /** 备品备件类型树 */
      spareTypeOptions: [],
      dialogFormVisible: false
    }
  },
  created() {
    tree().then(response => {
      this.availableOganizations = response.data
    })
    assetTypeTree().then(response => {
      this.typeOptions = response.data
    })
    spareTypeTree().then(response => {
      this.spareTypeOptions = response.data
    })
  },
  methods: {
    sqexportExcel() {
      sqexportExcel(this.$parent.formItemView).then(res => {
        const content = res.data
        const blob = new Blob([content])
        const fileName = '库存查询信息.xlsx'
        if ('download' in document.createElement('a')) { // 非IE下载
          const elink = document.createElement('a')
          elink.download = fileName
          elink.style.display = 'none'
          elink.href = URL.createObjectURL(blob)
          document.body.appendChild(elink)
          elink.click()
          URL.revokeObjectURL(elink.href) // 释放URL 对象
          document.body.removeChild(elink)
        } else { // IE10+下载
          navigator.msSaveBlob(blob, fileName)
        }
      })
    },
    // vue treeselect 输入值改变事件
    onOrgInput(value) {
      this.globalSearch()
    },
    globalSearch() {
      this.$parent.formItemView = clone(this.formItem)
      this.$parent.filter(this.formItem)
    },
    reset() {
      this.formItem = clone(formItem)
      this.$parent.formItemView = clone(this.formItem)
      this.globalSearch()
    },
    onGlobeSearchInputChange(value) {
      if (value === '') {
        this.globalSearch()
      }
    },
    onSpareTypeCodeInput() {
      this.globalSearch()
    },
    onTypeCodeInput() {
      this.globalSearch()
    }
  }
}
</script>
